<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="fragment/head"/>
    <link href="resources/assets/global/font-awesome/css/all.css" rel="stylesheet">
</head>

<body class="page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid page-content-white page-sidebar-closed">
<th:block th:replace="fragment/header"/>
<!-- BEGIN CONTAINER -->
<div class="page-container">
    <!-- BEGIN SIDEBAR -->
    <th:block th:replace="fragment/sidebar"/>
    <!-- BEGIN CONTENT -->
    <div class="page-content-wrapper">
        <!-- BEGIN CONTENT BODY -->
        <div class="page-content">
            <!-- BEGIN PAGE BAR -->
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li><a href="index.html" class='msg_home'>控制台</a> <i class="fa fa-circle"></i></li>
                    <li><span class=''></span></li>
                </ul>
            </div>
            <!-- BEGIN PAGE TITLE-->
            <h1 class="page-title">
                <span class="msg_title"></span>
                <small class="msg_subtitle"></small>
            </h1>
            <!-- BEGIN main content -->
            <div class="row">
                <!-- BEGIN ===========page level content============= -->
                <!--=================== Component 1 Four CountUp Numbers =======--->
                <div class="col-md-3">
                    <a href="product">
                        <div class="widget-thumb widget-bg-color-white text-uppercase margin-bottom-20 bordered">
                            <h4 class="widget-thumb-heading">产品种类</h4>
                            <div class="widget-thumb-wrap">
                                <i class="widget-thumb-icon bg-green fas fa-cube"></i>
                                <div class="widget-thumb-body">
                                    <span class="widget-thumb-subtitle"></span>
                                    <span id='product_couterup' class="widget-thumb-body-stat">0</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <div class="widget-thumb widget-bg-color-white text-uppercase margin-bottom-20 bordered">
                        <h4 class="widget-thumb-heading">产品规格种类</h4>
                        <div class="widget-thumb-wrap">
                            <i class="widget-thumb-icon bg-red icon-layers"></i>
                            <div class="widget-thumb-body">
                                <span class="widget-thumb-subtitle"></span>
                                <span id='productSpec_couterup' class="widget-thumb-body-stat">0</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <a href="stock">
                        <div class="widget-thumb widget-bg-color-white text-uppercase margin-bottom-20 bordered">
                            <h4 class="widget-thumb-heading">SKU种类</h4>
                            <div class="widget-thumb-wrap">
                                <i class="widget-thumb-icon bg-purple fas fa-cubes"></i>
                                <div class="widget-thumb-body">
                                    <span class="widget-thumb-subtitle"></span>
                                    <span id='sku_couterup' class="widget-thumb-body-stat">0</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <div class="widget-thumb widget-bg-color-white text-uppercase margin-bottom-20 bordered">
                        <h4 class="widget-thumb-heading">订单数量</h4>
                        <div class="widget-thumb-wrap">
                            <i class="widget-thumb-icon bg-blue icon-bar-chart"></i>
                            <div class="widget-thumb-body">
                                <span class="widget-thumb-subtitle"></span>
                                <span id="trade_couterup" class="widget-thumb-body-stat">0</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!--=================== Component 2 Percentage Figures =======--->
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <a href="orders">
                        <div class="dashboard_progress_bar_order dashboard-stat2 ">
                        <div class="display">
                            <div class="number">
                                <h3 class="font-green-sharp">
                                    <span class="progress_number"></span>
                                    <small class="font-green-sharp"></small>
                                </h3>
                                <small>已完成订单</small>
                            </div>
                            <div class="icon">
                                <i class="fas fa-chart-pie"></i>
                            </div>
                        </div>
                        <div class="progress-info">
                            <div class="progress">
                                <span style="width: 100%;" class="progress-bar progress-bar-success green-sharp">
                                    <span class="sr-only"></span>
                                </span>
                            </div>
                            <div class="status">
                                <div class="status-title">总订单 <i></i></div>
                                <div class="status-number"></div>
                            </div>
                        </div>
                    </div>
                    </a>
                </div>
                <div class="dashboard_progress_pro_mapping col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <div class="dashboard-stat2 ">
                        <div class="display">
                            <div class="number">
                                <h3 class="font-blue-sharp">
                                    <span class="progress_number"></span>
                                </h3>
                                <small>已对接产品</small>
                            </div>
                            <div class="icon">
                                <i class="fas fa-link"></i>
                            </div>
                        </div>
                        <div class="progress-info">
                            <div class="progress">
                                <span style="width: 85%;" class="progress-bar progress-bar-success blue-sharp">
                                    <span class="sr-only">85% change</span>
                                </span>
                            </div>
                            <div class="status">
                                <div class="status-title"> 产品对接 <i></i></div>
                                <div class="status-number"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dashboard_progress_sku_pro_spec col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <div class="dashboard-stat2 ">
                        <div class="display">
                            <div class="number">
                                <h3 class="font-purple-soft">
                                    <span class="progress_number"></span>
                                </h3>
                                <small>已设SKU <i></i></small>
                            </div>
                            <div class="icon">
                                <i class="fas fa-cubes"></i>
                            </div>
                        </div>
                        <div class="progress-info">
                            <div class="progress">
                                <span style="width: 100%;" class="progress-bar progress-bar-success purple-soft">
                                    <span class="sr-only"></span>
                                </span>
                            </div>
                            <div class="status">
                                <div class="status-title">产品规格总数<i></i></div>
                                <div class="status-number">100%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--=================== Component 3 Order List Portlet =======--->
                <div class="col-lg-6 col-xs-12 col-sm-12">
                    <div class="portlet light tasks-widget bordered">
                        <div class="portlet-title">
                            <div class="caption">
                                <i class="icon-share font-dark hide"></i>
                                <span class="caption-subject font-dark bold uppercase">最近订单</span>
                                <span class="caption-helper">...</span>
                            </div>
                            <div class="actions">
                                <a href="orderDetails?orderId="
                                   class="add_task btn btn-circle btn-icon-only btn-default border-green" title="新建订单">
                                    <i class="fa fa-plus font-green"></i>
                                </a>
                                <a href="orders" class="add_task btn btn-circle btn-icon-only btn-default border-blue"
                                   title="查看所有订单">
                                    <i class="fas fa-arrow-right font-blue"></i>
                                </a>

                                <div class="btn-group">
                                    <!--a class="btn blue-oleo btn-circle btn-sm" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                                        Coming...
                                        <i class="fa fa-angle-down"></i>
                                    </a-->
                                    <ul class="dropdown-menu pull-right">
                                        <li>
                                            <a href="javascript:;"> All Project </a>
                                        </li>
                                        <li class="divider"></li>
                                        <li>
                                            <a href="javascript:;"> Pending
                                                <span class="badge badge-danger"> 4 </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:;"> Completed
                                                <span class="badge badge-success"> 12 </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="portlet-body">
                            <div id='order_list_content' class="task-content">
                                <div class="scroller" style="height: 312px;" data-always-visible="1"
                                     data-rail-visible1="1">
                                    <!-- START TASK LIST -->
                                    <ul id='order_list' class="task-list">
                                        <!-- Sample refer to admin_1/dashboard_3.html TASK portlet-->
                                    </ul>
                                    <!-- END START TASK LIST -->
                                </div>
                            </div>
                            <div class="task-footer">
                                <div class="btn-arrow-link pull-right">
                                    <a href="orders">查看所有订单</a>
                                    <i class="icon-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--=================== Component 4 Amchart ============--->
                <div class="col-lg-6 col-xs-12 col-sm-12">
                    <div class="portlet light ">
                        <div class="portlet-title">
                            <div class="caption">
                                <span class="caption-subject bold uppercase font-dark msg_dashboard_sales">销售额</span>
                                <span class="caption-helper"></span>
                            </div>
                            <div class="actions">
                                <a id="refresh_order_statistics" href="javascript:;"
                                   class="add_task btn btn-circle btn-icon-only btn-default border-blue" title="刷新">
                                    <i class="fas fa-sync font-blue"></i>
                                </a>
                            </div>
                        </div>
                        <div class="portlet-body">
                            <div id="dashboard_amchart_1" class="CSSAnimationChart"></div>
                        </div>
                    </div>
                </div>
                <!-- END   ===========page level content============= -->
            </div>
        </div>
    </div>
</div>
<th:block th:replace="fragment/rear"/>
<!-- ======== number counterup ==== -->
<script src="resources/assets/global/plugins/counterup/jquery.waypoints.min.js"></script>
<script src="resources/assets/global/plugins/counterup/jquery.counterup.min.js"></script>
<!-- ======== Amchart dependency === -->
<script src="resources/assets/global/plugins/morris/morris.min.js"></script>
<!-- ======== Amchart ============== -->
<script src="resources/assets/global/plugins/amcharts/amcharts/amcharts.js"></script>
<script src="resources/assets/global/plugins/amcharts/amcharts/serial.js"></script>
<script src="resources/assets/global/plugins/amcharts/amcharts/lang/cn.js"></script>
<script src="resources/assets/pages/amChartInit.js"></script>

<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script th:inline="javascript">
    jQuery(document).ready(function () {

        /*[+
        caryr.lang = [[${session.lang}]];
        +]*/
        caryr.loadI18n();

        /************ CountUp Numbers **********/
        caryr.loadData({
            url: 'api/product/count',
            callback: function (data) {
                if (data && data.data) {
                    caryr.triggerCounterUp($('#product_couterup'), data.data);
                }
            }
        });
        caryr.loadData({
            url: 'api/productSpec/count',
            callback: function (data) {
                if (data && data.data) {
                    caryr.triggerCounterUp($('#productSpec_couterup'), data.data.total);
                }
            }
        });
        caryr.loadData({
            url: 'api/sku/count',
            callback: function (data) {
                if (data && data.data) {
                    caryr.triggerCounterUp($('#sku_couterup'), data.data);
                }
            }
        });
        caryr.loadData({
            url: 'api/order/count',
            callback: function (data) {
                if (data && data.data && data.data.total) {
                    caryr.triggerCounterUp($('#trade_couterup'), data.data.total);
                }
            }
        });

        /************ Percentage Component **********/
        caryr.loadData({
            url: 'api/order/count',
            callback: function (data) {
                if (data && data.data) {
                    var total = data.data.total ? data.data.total : 0;
                    var finish = data.data.finish ? data.data.finish : 0;
                    caryr.progressBar($('.dashboard_progress_bar_order'), finish, total);
                }
            }
        });
        caryr.loadData({
            url: 'api/productMapping/count',
            callback: function (data) {
                if (data && data.data) {
                    var total = data.data.total ? data.data.total : 0;
                    var finish = data.data.finish ? data.data.finish : 0;
                    caryr.progressBar($('.dashboard_progress_pro_mapping'), finish, total);
                }
            }
        });
        caryr.loadData({
            url: 'api/productSpec/count',
            callback: function (data) {
                if (data && data.data) {
                    var total = data.data.total ? data.data.total : 0;
                    var finish = data.data.finish ? data.data.finish : 0;
                    caryr.progressBar($('.dashboard_progress_sku_pro_spec'), finish, total);
                }
            }
        });

        /************ Order List Component **********/
        var max_order_size = 25;
        var max_order_title_length = 40;
        caryr.loadData({
            url: 'api/order?orderBy=status&isAsc=true&start=0&length=' + max_order_size,
            callback: function (data) {
                if (data && data.data) {
                    for (var i = 0; i < data.data.length && i < max_order_size; i++) {
                        var html = '';
                        var order = data.data[i];
                        var title = order.receiver + ' ' + order.address + ' ' + order.phoneNum;
                        title = caryr.hideTxt(title, max_order_title_length);
                        var linkAttr = "href='orderDetails?orderId=" + order.id + "'  target='_blank'";
                        html +=
                            '<li>' +
                            '<div class="task-checkbox">' +
                            '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">' +
                            '<input type="checkbox" class="checkboxes" value="1" />' +
                            '<span></span>' +
                            '    </label>' +
                            '</div>' +
                            '<div class="task-title">' +
                            '<a ' + linkAttr + ' >' +
                            '<span class="task-title-sp">' + title + '</span> ' +
                            '</a>' +
                            caryr.order.orderStatusHtml(order.status) +
                            '</div>' +
                            '</li>';
                        $('#order_list').append(html);
                    }
                    caryr.loadI18n();
                }
            }
        });

        /************ Order List Component **********/
        caryr.loadData({
            url: 'api/order/statistics',
            callback: function (data) {
                if (data && data.data) {
                    // init Am Chart
                    Dashboard.init(data.data);
                }
            }
        });

        function refreshStatistics() {
            caryr.fetchRefList({
                url: 'api/order/refreshStatistics',
                callback: function (data) {
                    swal({
                        title: $.i18n.prop("msg_api_succ_update"),
                        text: "",
                        type: "success"
                    }, function () {
                        if (data && data.data) {
                            // init Am Chart
                            Dashboard.init(data.data);
                        }
                    });
                }
            });
        }

        $('#refresh_order_statistics').on('click', function () {
            caryr.confirm({
                title: $.i18n.prop("msg_refresh_order_statistics_confirm"),
                onConfirm: function () {
                    refreshStatistics();
                }
            });
        });
    });
</script>
</body>

</html>